{% extends "base.html" %}

{% block subtitle %}
  Editor View
{% endblock subtitle %}

{% block header_js %}
  {{ super() }}
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
  </script>
{% endblock header_js %}

{% block content %}
  {% if announcement %}
    <div class="oppia-align-center oppia-warning">
      {{ announcement }}
    </div>
  {% endif %}

  <div ng-controller="EditorExploration" ng-cloak>
    <script type="text/ng-template" id="modals/publishExploration">
      <div class="modal-header">
        <h3>Publish Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Congratulations, you are about to 
          <a href="../about#/how-to-use#lifecycle" target="_blank">publish</a> an 
          exploration!
        </p>

        <p>
          This means that this exploration will be added to the public gallery, 
          visible to all users of the site. It will also be possible to view 
          statistics on readers' attempts at the exploration, so that the 
          exploration can be improved over time.
        </p>

        <p>
          Please only publish this exploration if it contains significant 
          educational content. Publishing an exploration is currently a 
          <strong>one-way</strong> action, since once you publish the 
          exploration, the Oppia community will be able to contribute feedback
          and suggest improvements to it.
        </p>

        <p>
          Would you like to publish this exploration?
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn" ng-click="publish()">Publish</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/releaseExplorationOwnership">
      <div class="modal-header">
        <h3>Release Exploration Ownership</h3>
      </div>

      <div class="modal-body">
        <p>
          You are about to release ownership of this exploration to the
          community! This will allow anyone to freely edit and improve
          the exploration. Your previous contributions will still be visible
          in the version history logs, and you will still be able to view and
          edit the exploration.
        </p>

        <p>
          Please note that after an exploration is released to the community, it will
          no longer have an explicit list of managers,
          so this action is <strong>not reversible</strong>.
        </p>

        <p>
          Would you like to release ownership of this exploration to the
          community?
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn" ng-click="release()">Release Ownership</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/deleteExploration">
      <div class="modal-header">
        <h3>Delete Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Really delete this exploration? <strong>This action cannot be reversed.</strong>
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn" ng-click="reallyDelete()">Delete</button>
        <button class="btn" ng-click="cancel()">Close</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/deleteState">
      <div class="modal-header">
        <h3>Delete State</h3>
      </div>

      <div class="modal-body">
        <p>
          Are you sure you want to delete the state "<[deleteStateName]>"?
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn" ng-click="reallyDelete()">Delete</button>
        <button class="btn" ng-click="cancel()">Close</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/saveExploration">
      <div class="modal-header">
        <h3>Save Exploration</h3>
      </div>
      <div class="modal-body">
        <p>
          You are about to save changes to this exploration. These changes will immediately be visible to other viewers.
        </p>
        <p>
          <span ng-if="commitMessageIsOptional">(Optional)</span>
          Please enter a brief description of what you have changed:
          <textarea rows="3" cols="50" ng-model="commitMessage" autofocus></textarea>
        </p>

        <div ng-if="explorationChangesExist">
          <em>
            You changed the following properties of the exploration:
          </em>
          <ul>
            <li ng-repeat="(propertyName, changeInfo) in explorationPropertyChanges">
              <[formatExplorationPropertyChange(propertyName, changeInfo)]>
            </li>
          </ul>
        </div>

        <p ng-if="addedStates.length > 0">
          <em>You added the following states</em>: <strong><[formatStateList(addedStates)]></strong>
        </p>

        <div ng-if="stateChangesExist">
          <em>
            You made the following changes to states:
          </em>
          <div ng-repeat="(stateName, stateChanges) in statePropertyChanges">
            <h5><[stateName]></h5>
            <ul>
              <li ng-repeat="(propertyName, changeInfo) in stateChanges">
                <[formatStatePropertyChange(propertyName, changeInfo)]>
              </li>
            </ul>
          </div>
        </div>

        <p ng-if="deletedStates.length > 0">
          <em>You deleted the following states:</em> <strong><[formatStateList(deletedStates)]></strong>
        </p>

        <p ng-if="changedStates.length > 0">
          <em>You changed the following states:</em> <strong><[formatStateList(changedStates)]></strong>
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-disabled = "!commitMessageIsOptional && !commitMessage" ng-click="save(commitMessage)">Save</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </script>

    <div class="container">
      <div class="row" ng-if="isCloned">
        <div class="span12">
          <div class="oppia-align-center oppia-warning">
            <strong>Note:</strong> This is a private, unpublishable copy of a
            <a ng-href="<[getExplorationUrl(clonedFrom)]>" target="_blank">public exploration</a>.
            You are very welcome to submit feedback to improve the original exploration: to do this,
            click the previous link, then click the green Feedback button on the left of the page.
            Thank you!
          </div>
        </div>
      </div>

      <div class="row">
        <div class="span4">
          <a href="/contribute" class="btn" ng-if="!iframed">
            Return to the contributors' gallery
          </a>
        </div>

        <div class="pull-right oppia-editor-reference">
          <h5>
            <a ng-click="usefulReferencesIsShown = !usefulReferencesIsShown" class="oppia-editor-section-header">
              <i class="icon-plus-sign" ng-hide="usefulReferencesIsShown"></i>
              <i class="icon-minus-sign" ng-show="usefulReferencesIsShown"></i>
              Useful References
            </a>
          </h5>
          <div collapse="!usefulReferencesIsShown" class="oppia-useful-references">
            <ul>
              <li>
                <a href="https://code.google.com/p/oppia/wiki/PlanningYourExploration" target="_blank">Planning Your Exploration</a>
              </li>
              <li>
                <a href="https://code.google.com/p/oppia/wiki/DesignTips" target="_blank">Exploration Design Tips</a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="span12">

          <span class="pull-right" style="margin-top: 10px; margin-right: 5px;">
            {% if can_publicize %}
              <span ng-show="isPublic">
                <button type="button" ng-click="publicizeExploration()" ng-disabled="isExplorationLockedForEditing()">
                  Move out of beta
                  <span ng-if="currentUserIsAdmin">
                    (as admin)
                  </span>
                  <span ng-if="!currentUserIsAdmin && currentUserIsModerator">
                    (as moderator)
                  </span>
                </button>
                &nbsp;&nbsp;&nbsp;
              </span>
            {% endif %}

            {% if can_unpublicize %}
              <span ng-show="isPublicized">
                <button type="button" ng-click="unpublicizeExploration()" ng-disabled="isExplorationLockedForEditing()">
                  Move back into beta
                  <span ng-if="currentUserIsAdmin">
                    (as admin)
                  </span>
                  <span ng-if="!currentUserIsAdmin && currentUserIsModerator">
                    (as moderator)
                  </span>
                </button>
                &nbsp;&nbsp;&nbsp;
              </span>
            {% endif %}

            {% if can_publish %}
              <span ng-show="isPrivate">
                <button type="button" ng-click="showPublishExplorationModal()" ng-disabled="isExplorationLockedForEditing()">
                  Publish
                </button>
                <img class="oppia-help" src="/images/help.png"
                     tooltip="Click this button to publish your exploration in the gallery, so that others can read it."
                     tooltip-placement="bottom">
                &nbsp;&nbsp;&nbsp;
              </span>
            {% endif %}

            {% if can_release_ownership %}
              <span ng-hide="isCommunityOwned">
                <button type="button" ng-click="showReleaseExplorationOwnershipModal()" ng-disabled="isExplorationLockedForEditing()">
                  Release Ownership
                </button>
                <img class="oppia-help" src="/images/help.png"
                     tooltip="Click this button to release ownership of this exploration to the community."
                     tooltip-placement="bottom">
                &nbsp;&nbsp;&nbsp;
              </span>
            {% endif %}

            <a class="btn" target="_blank" href="/explore/<[explorationId]>"
               title="Play this exploration in a new window.">
              <i class="icon-play"></i>
            </a>

            &nbsp;&nbsp;&nbsp;

            <a class="btn" ng-click="downloadExploration()"
               title="Download exploration as a zip file.">
              <i class="icon-download-alt"></i>
            </a>

            <span ng-if="isPrivate">
              &nbsp;&nbsp;&nbsp;
              <button type="button" class="btn btn-danger"
                      ng-click="deleteExploration('')"
                      title="Delete this exploration">
                <i class="icon-trash" title="Delete Exploration"></i>
              </button>
            </span>

            <span ng-if="isPublic && (currentUserIsAdmin || currentUserIsModerator)">
              &nbsp;&nbsp;&nbsp;
              <button type="button" class="btn btn-danger"
                      ng-click="currentUserIsAdmin ? deleteExploration('admin') : deleteExploration('moderator')">
                <i class="icon-trash"></i>
                <span ng-if="currentUserIsAdmin">
                  (as admin)
                </span>
                <span ng-if="!currentUserIsAdmin && currentUserIsModerator">
                  (as moderator)
                </span>
              </button>
            </span>

          </span>

          <h3>
            <[explorationTitle]>
            <span ng-if="!isPrivate" class="label label-info">
              Published
            </span>
            <span ng-if="isPublic" class="label label-info">
              Beta
            </span>
            <span ng-if="isCloned" class="label label-info">
              Cloned
            </span>
            <span ng-if="isCommunityOwned" class="label label-info">
              Community-owned
            </span>
          </h3>

          <div>
            <div style="float: right;">
              <button class="btn oppia-save-exploration-button pull-right" ng-click="discardChanges()" ng-disabled="!isExplorationSaveable()">discard changes</button>
              <button class="btn oppia-save-exploration-button pull-right" ng-class="{'btn-success': isExplorationSaveable()}" ng-click="saveChanges()" ng-disabled="!isExplorationSaveable()">save changes</button>
            </div>

            <tabset>
              <tab heading="Exploration Details" active="mainTabActive" select="selectMainTab()">
                <div class="oppia-state-editor-container">
                  {% include 'editor/editor_metadata.html' %}
                  <div ng-if="!isCloned">
                    <hr>
                    {% include 'editor/editor_version_history.html' %}
                  </div>
                  <hr>
                  {% include 'editor/editor_viz.html' %}
                  <div ng-controller="StateEditor" ng-show="currentlyInStateContext()" class="pull-right oppia-state-editor">
                    <div class="oppia-state-editor-header">
                      <button class="pull-right" ng-click="closeStateEditor()">
                        <i class="icon-minus"></i>
                      </button>
                      <h5>
                        State Editor
                      </h5>
                    </div>

                    <div class="oppia-state-editor-body">
                      {% include 'editor/state_editor.html' %}
                    </div>
                  </div>
                </div>
              </tab>

              <tab heading="Exploration Stats" active="statsTabActive" select="selectStatsTab()">
                {% include 'editor/stats_viewer.html' %}
              </tab>
            </tabset>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/ng-template" id="inline/param_change_editor">
    {% include 'components/param_change_editor.html' %}
  </script>

{% endblock content %}

{% block footer_js %}
  {{ super() }}
  <script src="/third_party/static/d3js-3.2.8/d3.min.js"></script>
  <script>
    {{ include_js_file('services/explorationData.js') }}
    {{ include_js_file('editor/EditorExploration.js') }}
    {{ include_js_file('components/valueGeneratorEditor.js') }}
    {{ value_generators_js }}
    {{ include_js_file('components/objectEditor.js') }}
    {{ object_editors_js }}
    {{ include_js_file('editor/StatsViewer.js') }}
    {{ include_js_file('editor/StateEditor.js') }}
    {{ include_js_file('editor/StateReaderFeedback.js') }}
    {{ include_js_file('editor/UnresolvedAnswers.js') }}
    /* These should come after the valueGeneratorEditor scripts. */
    {{ include_js_file('editor/InteractiveWidgetEditor.js') }}
    {{ include_js_file('components/paramChangeEditor.js') }}
  </script>

  {{ widget_js_directives }}
{% endblock footer_js %}
